<template>
    <div>
        <div class="header">
            <a-breadcrumb>
                <a-breadcrumb-item>用户</a-breadcrumb-item>
                <a-breadcrumb-item><a href="">CRM企业管理</a></a-breadcrumb-item>
                <a-breadcrumb-item>全部线索</a-breadcrumb-item>
            </a-breadcrumb>
        </div>
        <div class="top">
            <div class="left">
                <!-- 选择搜索方式 -->
                <a-select
                ref="select"
                v-model:value="select_value"
                style="width: 120px"
                >
                    <a-select-option :value="0">公司名称</a-select-option>
                    <a-select-option :value="1">联系方式</a-select-option>
                </a-select>
                <!-- 搜索内容 -->
                <a-input-search
                v-model:value="inp_value"
                placeholder="input search text"
                style="width: 200px"
                @search="onSearch"
                />
            </div>
            <a-button type="primary" class="right" @click="goto_add">新增线索</a-button>
        </div>
        <a-table :dataSource="dataSource" :columns="columns" :bordered="true" key="id"
         :scroll="{ x: 2000}" :row-selection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" :pagination="false"
         >
         <template #action="{ column,record }">
            <a @click="upd_xq(record)">查看</a>
        </template>
        </a-table>
        <!-- 分页区域 -->
         <a-pagination class="pagi"
            v-model:current="page"
            v-model:page-size="pagesize"
            :page-size-options="pagesize_num"

            :total="total"
            show-size-changer
            @showSizeChange="onShowSizeChange"
            @change="page_Change"
        >
            <template #buildOptionText="props">
                <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
                <span v-else>全部</span>
            </template>
        </a-pagination>

        <!-- 新增 -->
        <a-drawer
            v-model:visible="add_visible"
            class="custom-class"
            title="新增线索"
            placement="left"
            :width="720"
        >
            <a-form
            :model="cus"
            v-bind="layout"
            name="nest-messages"
            :validate-messages="validateMessages"
            @finish="onFinish"
            >
            <a-form-item  label="用户名称" :rules="[{ required: true }]">
                <a-input v-model:value="cus.username" />
            </a-form-item>
            <a-form-item  label="用户手机号" :rules="[{ required: true }]">
                <a-input v-model:value="cus.mobile" />
            </a-form-item>
            <a-form-item  label="密码" :rules="[{ required: true }]">
                <a-input v-model:value="cus.password" />
            </a-form-item>
            <a-form-item label="公司名称">
                <a-input v-model:value="cus.enterprise_name" />
            </a-form-item>
            <a-form-item label="公司简称">
                <a-input v-model:value="cus.enterprise_abb" />
            </a-form-item>
            <a-form-item label="详细地址">
                <a-input v-model:value="cus.enterprise_address" />
            </a-form-item>
            <a-form-item label="所在地区">
                <a-input v-model:value="cus.enterprise_region" />
            </a-form-item>
            <a-form-item label="联系人">
                <a-input v-model:value="cus.contact_person" />
            </a-form-item>
            <a-form-item label="联系电话">
                <a-input v-model:value="cus.contact_mobile" />
            </a-form-item>
            <a-form-item label="企业性质">
                <a-select
                ref="select"
                v-model:value="cus.enterprise_nature"
                style="width: 120px"
                >
                    <a-select-option value="民营">民营</a-select-option>
                    <a-select-option value="国企">国企</a-select-option>
                    <a-select-option value="融资">融资</a-select-option>
                    <a-select-option value="外企">外企</a-select-option>
                    <a-select-option value="上市公司">上市公司</a-select-option>
                    <a-select-option value="国家机关">国家机关</a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="企业规模">
                <a-select
                ref="select"
                v-model:value="cus.enterprise_scale"
                style="width: 120px"
                >
                    <a-select-option value="20人以下">20人以下</a-select-option>
                    <a-select-option value="20-99人">20-99人</a-select-option>
                    <a-select-option value="100-499人">100-499人</a-select-option>
                    <a-select-option value="500-999人">500-999人</a-select-option>
                    <a-select-option value="1000-9999人">1000-9999人</a-select-option>
                    <a-select-option value="10000人以上">10000人以上</a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="企业行业">
                <a-select
                ref="select"
                v-model:value="cus.enterprise_ind"
                style="width: 120px"
                >
                    <a-select-option value="计算机硬件/软件">计算机硬件/软件</a-select-option>
                    <a-select-option value="计算机系统/维修">计算机系统/维修</a-select-option>
                    <a-select-option value="网络游戏">网络游戏</a-select-option>
                    <a-select-option value="互联网/电子商务">互联网/电子商务</a-select-option>
                    <a-select-option value="电子/半导体/集成电路">电子/半导体/集成电路</a-select-option>
                    <a-select-option value="仪器仪表">仪器仪表</a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="赠送套餐">
                <a-radio-group v-model:value="cus.package">
                    <a-radio value="半年会员">半年会员</a-radio>
                    <a-radio value="免费会员">免费会员</a-radio>
                    <a-radio value="月度会员">月度会员</a-radio>
                    <a-radio value="季度会员">季度会员</a-radio>
                    <a-radio value="年度会员">年度会员</a-radio>
                </a-radio-group>
            </a-form-item>
            <a-form-item label="所属销售">
                <a-radio-group v-model:value="cus.sales">
                    <a-radio :value="username">我的线索</a-radio>
                    <a-radio value="">公共线索</a-radio>
                </a-radio-group>
            </a-form-item>
            <a-form-item label="认证状态">
                <a-radio-group v-model:value="cus.status">
                    <a-radio value="审批中">待审核</a-radio>
                    <a-radio value="已认证">已认证</a-radio>
                    <a-radio value="未通过">未通过</a-radio>
                </a-radio-group>
            </a-form-item>
            <a-form-item label="公司logo">
                <a-upload>

                </a-upload>
            </a-form-item>
            <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
                <a-button type="primary" @click.prevent="add">保存</a-button>
            </a-form-item>
        </a-form>
        </a-drawer>

        <!-- 查看详情 -->
        <a-drawer
            v-model:visible="xq_visible"
            class="custom-class"
            :width="1000"
            placement="right"
        >
            <div class="top_1">
                <p class="p_top">
                    <span class="p1">{{upd_cus.enterprise_name}}</span><span class="p1_1">(线索号:{{upd_cus.id}})</span>
                </p>
                <p class="p_center">
                    <span class="p2">所属销售: {{upd_cus.sales}} </span>
                    <span class="p2">套餐会员: {{upd_cus.package}}</span>
                    <span class="p2">跟进记录: {{upd_cus.follow_up}}</span>
                </p>
                <p class="p_bott">
                    <span class="p2">所在地区: {{upd_cus.enterprise_address}} </span>
                    <span class="p2">公司简称: {{upd_cus.enterprise_abb}}</span>
                    <span  class="p2">认证状态: {{upd_cus.status}}</span>   
                </p>
                
            </div>
            <div class="center">
                 <a-tabs>
                    <a-tab-pane key="1" tab="跟进记录">
                         <!-- 正在禁用: -->
                        <div class="left1">
                            <a-form
                            >
                                <a-form-item label="跟进方式" :rules="[{ required: true }]">
                                    <a-select
                                    ref="select" disabled
                                    v-model:value="follow_type"
                                  
                                    >
                                        <a-select-option value="网络拜访">网络拜访</a-select-option>
                                        <a-select-option value="电话拜访">电话拜访</a-select-option>
                                        <a-select-option value="当面拜访">当面拜访</a-select-option>
                                        <a-select-option value="其他拜访">其他拜访</a-select-option>
                                    </a-select>
                                </a-form-item>
                                <a-form-item label="联系人">
                                    <a-select disabled
                                    ref="select"
                                    v-model:value="contacts"
                                  
                                    >
                                        <a-select-option :value="contacts_mobile">{{contacts_mobile}}</a-select-option>
                                        <a-select-option :value="contacts_mobile1">{{contacts_mobile1}}</a-select-option>
                                    </a-select>
                                </a-form-item>
                                <a-form-item label="下次跟进">
                                    <a-date-picker v-model:value="time" style="width: 50%" disabled />
                                </a-form-item>
                                <a-form-item label="跟进结果">
                                    <a-textarea v-model:value="result" placeholder="Basic usage" :rows="4" v />
                                </a-form-item>
                                <a-form-item label="添加图片">
                                    <a-upload-dragger disabled
                                        v-model:fileList="fileList"
                                        name="file"
                                        :multiple="true"
                                        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                                        @change="handleChange"
                                        @drop="handleDrop"
                                    >
                                        <p class="ant-upload-drag-icon">
                                        <inbox-outlined></inbox-outlined>
                                        </p>
                                        <p class="ant-upload-text">Click or drag file to this area to upload</p>
                                        <p class="ant-upload-hint">
                                        Support for a single or bulk upload. Strictly prohibit from uploading company data or other
                                        band files
                                        </p>
                                    </a-upload-dragger>
                                </a-form-item>
                                <a-form-item>
                                    <a-button type="primary" @click="addfollow" disabled>保存</a-button>
                                </a-form-item>
                            </a-form>
                        </div>
                        <div class="right1">
                            <p class="right1_p1">历史跟进</p>
                            <div class="one" v-for="item in follow_data" :key="item.id">
                                <img :src="item.img_url" alt="" class="img">
                                <div class="cont">
                                    <div class="cont_1">
                                        <p>{{item.username}}</p>
                                        <p>{{item.follow_type}}</p>
                                        <p>{{item.contacts}}</p>
                                        <p>{{item.time}}</p>
                                    </div>
                                    <div class="cont_1">
                                        <p>
                                            {{item.result}}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </a-tab-pane>
                    <a-tab-pane key="2" tab="线索详情" force-render>
                        <a-form
                        :model="upd_cus"
                        v-bind="layout"
                        name="nest-messages"
                        :validate-messages="validateMessages"
                        @finish="onFinish"
                        >
                            <a-form-item  label="用户名称" :rules="[{ required: true }]">
                                <a-input v-model:value="upd_cus.username" />
                            </a-form-item>
                            <a-form-item  label="用户手机号" :rules="[{ required: true }]">
                                <a-input v-model:value="upd_cus.mobile" />
                            </a-form-item>
                            <a-form-item  label="密码" :rules="[{ required: true }]">
                                <a-input v-model:value="upd_cus.password" />
                            </a-form-item>
                            <a-form-item label="公司名称">
                                <a-input v-model:value="upd_cus.enterprise_name" />
                            </a-form-item>
                            <a-form-item label="公司简称">
                                <a-input v-model:value="upd_cus.enterprise_abb" />
                            </a-form-item>
                            <a-form-item label="详细地址">
                                <a-input v-model:value="upd_cus.enterprise_address" />
                            </a-form-item>
                            <a-form-item label="所在地区">
                                <a-input v-model:value="upd_cus.enterprise_region" />
                            </a-form-item>
                            <a-form-item label="联系人">
                                <a-input v-model:value="upd_cus.contact_person" />
                            </a-form-item>
                            <a-form-item label="联系电话">
                                <a-input v-model:value="upd_cus.contact_mobile" />
                            </a-form-item>
                            <a-form-item label="企业性质">
                                <a-select
                                ref="select"
                                v-model:value="upd_cus.enterprise_nature"
                                style="width: 120px"
                                >
                                    <a-select-option value="民营">民营</a-select-option>
                                    <a-select-option value="国企">国企</a-select-option>
                                    <a-select-option value="融资">融资</a-select-option>
                                    <a-select-option value="外企">外企</a-select-option>
                                    <a-select-option value="上市公司">上市公司</a-select-option>
                                    <a-select-option value="国家机关">国家机关</a-select-option>
                                </a-select>
                            </a-form-item>
                            <a-form-item label="企业规模">
                                <a-select
                                ref="select"
                                v-model:value="upd_cus.enterprise_scale"
                                style="width: 120px"
                                >
                                    <a-select-option value="20人以下">20人以下</a-select-option>
                                    <a-select-option value="20-99人">20-99人</a-select-option>
                                    <a-select-option value="100-499人">100-499人</a-select-option>
                                    <a-select-option value="500-999人">500-999人</a-select-option>
                                    <a-select-option value="1000-9999人">1000-9999人</a-select-option>
                                    <a-select-option value="10000人以上">10000人以上</a-select-option>
                                </a-select>
                            </a-form-item>
                            <a-form-item label="企业行业">
                                <a-select
                                ref="select"
                                v-model:value="upd_cus.enterprise_ind"
                                style="width: 120px"
                                >
                                    <a-select-option value="计算机硬件/软件">计算机硬件/软件</a-select-option>
                                    <a-select-option value="计算机系统/维修">计算机系统/维修</a-select-option>
                                    <a-select-option value="网络游戏">网络游戏</a-select-option>
                                    <a-select-option value="互联网/电子商务">互联网/电子商务</a-select-option>
                                    <a-select-option value="电子/半导体/集成电路">电子/半导体/集成电路</a-select-option>
                                    <a-select-option value="仪器仪表">仪器仪表</a-select-option>
                                </a-select>
                            </a-form-item>
                            <a-form-item label="赠送套餐">
                                <a-radio-group v-model:value="upd_cus.package">
                                    <a-radio value="半年会员">半年会员</a-radio>
                                    <a-radio value="免费会员">免费会员</a-radio>
                                    <a-radio value="月度会员">月度会员</a-radio>
                                    <a-radio value="季度会员">季度会员</a-radio>
                                    <a-radio value="年度会员">年度会员</a-radio>
                                </a-radio-group>
                            </a-form-item>
                            <a-form-item label="所属销售">
                                <a-radio-group v-model:value="upd_cus.sales">
                                    <a-radio :value="username">我的线索</a-radio>
                                    <a-radio value="">公共线索</a-radio>
                                </a-radio-group>
                            </a-form-item>
                            <a-form-item label="认证状态">
                                <a-radio-group v-model:value="upd_cus.status">
                                    <a-radio value="审批中">待审核</a-radio>
                                    <a-radio value="已认证">已认证</a-radio>
                                    <a-radio value="未通过">未通过</a-radio>
                                </a-radio-group>
                            </a-form-item>
                            <a-form-item label="公司logo">
                                <a-upload>

                                </a-upload>
                            </a-form-item>
                            <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
                                <a-button type="primary" @click="updcus">保存</a-button>
                            </a-form-item>
                        </a-form>
                    </a-tab-pane>
                </a-tabs>
            </div>
        </a-drawer>
    </div>
</template>

<script>
import { onMounted, reactive, toRefs } from '@vue/runtime-core'
import {getdata,add_cus,getfollow,add_follow,update_cus} from '@/api/customer'
import { defineComponent } from 'vue';
import { message } from 'ant-design-vue';


export default defineComponent({
    setup(){

        let obj = reactive({
            //联系人加手机号
            contacts_mobile:'',
            contacts_mobile1:'',
            //修改的线索对象
            upd_cus:{},
            //新增跟进数据
            follow_up:'',
            user_id:'',
            follow_type:'',
            img_url:'',
            contacts:'',
            time:'',
            result:'',
            imgurl:'',
            //当前登录用户
            username:'admin',
            //新增线索的数据
            cus:{
                username:'',
                mobile :'',
                password:'',
                sales :'',
                enterprise_name :'',
                enterprise_abb :'',
                status :'',
                enterprise_img :'',
                enterprise_nature :'', 
                enterprise_scale :'',
                enterprise_ind :'',
                enterprise_region :'', 
                enterprise_address :'',
                contact_person :'',
                contact_mobile :'',
                package :'',
            },
            //分页数据
            pagesize_num:['1','2','3','4'],
            page:1,
            total:0,
            pagesize:4,
            //抽屉
            add_visible:false,
            xq_visible:false,
            //表格数据
            dataSource: [],
            columns: [
                {
                    title: '企业id',
                    dataIndex: 'id',
                    key: 'id',
                },
                {
                    title: '企业姓名',
                    dataIndex: 'enterprise_name',
                    key: 'enterprise_name',
                },
                {
                    title: '所属行业',
                    dataIndex: 'enterprise_ind',
                    key: 'enterprise_ind',
                },
                {
                    title: '所在地区',
                    dataIndex: 'enterprise_region',
                    key: 'enterprise_region',
                },
                {
                    title: '绑定微信',
                    dataIndex: 'mobile',
                    key: 'mobile',
                },
                {
                    title: '客户等级',
                    dataIndex: 'cus_ind',
                    key: 'cus_ind',
                },
                {
                    title: '详细地区',
                    dataIndex: 'enterprise_address',
                    key: 'enterprise_address',
                },
                {
                    title: '联系人',
                    dataIndex: 'contact_person',
                    key: 'contact_person',
                },
                {
                    title: '企业联系方式',
                    dataIndex: 'contact_mobile',
                    key: 'contact_mobile',
                },
                {
                    title: '会员联系方式',
                    dataIndex: 'update_time',
                    key: 'update_time',
                },
                {
                    title: '企业套餐',
                    dataIndex: 'package',
                    key: 'package',
                },
                {
                    title: '所属销售',
                    dataIndex: 'sales',
                    key: 'sales',
                },
                {
                    title: '认证状态',
                    dataIndex: 'status',
                    key: 'status',
                },
                {
                    title: '跟进(次)',
                    dataIndex: 'follow_up',
                    key: 'follow_up',
                },
                {
                    title: '操作',
                    key: "action",
                    slots: { customRender: "action" },
                    fixed: 'right',
                },
            ],
            selectedRowKeys:[],
            //搜索的方式
            select_value:0,
            //搜索的数据
            inp_value:'',
            //跟进数据
            follow_data:[],
        })



        onMounted(()=>{
            get_data()
        })
        
        const get_data=()=>{
            getdata({code:0,sel_val:obj.select_value,inp_val:obj.inp_value,page:obj.page,pagesize:obj.pagesize}).then((res)=>{
                console.log(res)
                obj.dataSource = res.data.data
                obj.total = res.data.total
           })
        }

        const onSelectChange = (selectedRowKeys,selectedRows) => {
            console.log('selectedRowKeys changed: ', selectedRows);
            obj.selectedRowKeys = selectedRowKeys;
        };
        //查看功能
        const upd_xq=(a)=>{
            obj.upd_cus = JSON.parse(JSON.stringify(a))
            obj.contacts_mobile = a.contact_person+' | '+a.contact_mobile
             obj.contacts_mobile1 = '企业联系方式'+' | '+a.mobile
            
            obj.user_id = a.id
            obj.follow_up = parseInt(a.follow_up)+1

            getfollow({id:a.id,code:2}).then((res)=>{
                obj.follow_data= res.data.data
                console.log(obj.follow_data)
            })

            obj.xq_visible = true
        }
        //搜索功能
        const onSearch=()=>{
            console.log(obj.inp_value)
            get_data()
        }
        //分页
        const onShowSizeChange=(current,pageSize)=>{
            obj.page = current
            obj.pagesize = pageSize
            get_data()
        }
        const page_Change=(page,pagesize)=>{
             obj.page = page
            obj.pagesize = pagesize
            get_data()
        }
        //添加
        const goto_add=()=>{
            obj.add_visible = true
        }

        const add=()=>{
            console.log(obj.cus)
            add_cus({cus:obj.cus}).then((res)=>{
                if(res.data.code == 200){
                    message.success('添加成功')
                    obj.add_visible = false
                    get_data()
                }
            })
        }

        const addfollow=()=>{
            console.log(obj.follow_type,obj.contacts,obj.time,obj.result)
            let contacts = obj.contacts.split('|')[0]

            add_follow({code:2,follow_type:obj.follow_type,follow_up:obj.follow_up,contacts:contacts,time:obj.time,user_id:obj.user_id,result:obj.result,imgurl:obj.imgurl,username:obj.username}).then((res)=>{
                message.success('跟进成功')
                get_data()
                obj.xq_visible = false
                obj.follow_up = ''
                obj.follow_up = ''
                obj.user_id=''
                obj.follow_type=''
                obj.img_url=''
                obj.contacts=''
                obj.time=''
                obj.result=''
                obj.imgurl=''
            })
        }
        //修改功能
        const updcus=()=>{
            console.log(obj.upd_cus)
            update_cus({cus:obj.upd_cus}).then((res)=>{
                message.success('修改成功')
                obj.xq_visible = false
                get_data()
            })
        }

        return {
            ...toRefs(obj),
            upd_xq,
            onSelectChange,
            onSearch,
            onShowSizeChange,
            page_Change,
            goto_add,
            add,
            addfollow,
            updcus
        }
    }
})
</script>

<style scoped>
.cont_1{
    width: 100%;
    height: 45px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
}
.cont{
    width: 80%;
    height: 100%;
}
.img{
    width: 80px;
    height: 80px;
    margin-right: 10px;
    border-radius: 50%;
}
.one{
    width: 100%;
    height: 100px;
    border-bottom: 1px solid #f2f2f2;
    display: flex;
}
.right1_p1{
    width: 100%;
    height: 40px;
    border-bottom: 1px solid #f2f2f2;
    margin-bottom: 10px;
}
.left1,.right1{
    display: inline-block;
}
.right1{
    width: 49%;
    height: 540px;
    float: right;
}
.left1{
    width: 49%;
    height: 540px;
    border-right: 2px solid #f2f2f2;
    padding-right: 10px;
}
.p_bott{
    width: 95%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    height: 40px;
    line-height: 40px;
}
.p_center{
    width: 95%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    height: 40px;
    line-height: 40px;
}
.p1_1{
    font-size: 10px;
}
.p1{
    font-size: 20px;
    margin-right: 30px;
}
.p_top{
    width: 95%;
    height: 30px;
    margin: 0 auto;
    margin-top: 10px;
}

.center{
    width: 100%;
    border-top: 2px solid #f2f2f2;
    margin-top: 5px;
}
.top_1{
    width: 100%;
    height: 120px;
    overflow: hidden;
}
.header{
    width: 100%;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #f2f2f2;
    padding: 15px 0 0 20px;
    margin-bottom: 20px;
}
.top{
    width: 100%;
    height: 50px;
    margin-bottom: 20px;
}
.left{
    width: 30%;
    height: 100%;
    display: inline-block;
}
.left,.right{
    display: inline-block;
}
.right{
    width: 100px;
    height: 80%;
    background: rgb(60, 136, 207);
    float: right;
    vertical-align: middle;
    border: 0;
}
.pagi{
    margin: 20px 0;
    float: right;
}

</style>